<script setup lang="ts">
import dayjs from 'dayjs';
import { storeToRefs } from 'pinia';
import { ref } from 'vue';
import { CheckHealthPackageApi } from '@/api/check-health-package';
import { CheckOrderApi } from '@/api/check-order';
import AuthBar from '@/components/authBar/index.vue';
import { PAY_TYPE } from '@/enums/pay.enums';
import { useRequest } from '@/hooks/useRequest';
import { useUserStore } from '@/store/userStore';
import { buildAssetSource } from '@/utils';
import { isUndefined } from '@/utils/is.utils';
import { currRoute, withQueryString } from '@/utils/router.utils';

const { query } = currRoute();

const { packageId, appointmentDate, timePeriod } = query;

// 获取体检套餐详情
const {
  data: packageDetail
} = useRequest(() => CheckHealthPackageApi.getPackageDetail(Number(packageId)));

const { userInfo } = storeToRefs(useUserStore());

function createOrder() {
  uni.showLoading({
    title: '创建订单中',
    mask: true
  });
  const { patientId, patientName } = userInfo.value;
  return CheckOrderApi.createCheckOrder({
    packageId: packageDetail.value.id,
    patientId,
    patientName,
    appointmentDate: dayjs(Number(appointmentDate)).format('YYYY-MM-DD'),
    paymentType: PAY_TYPE.ALIPAY,
    timePeriod,
    timePeriodId: query.appointmentDate
  }).finally(() => {
    uni.hideLoading();
  });
}

const confirmLoading = ref(false);

function handleNext() {
  if (isUndefined(selectPayType.value)) {
    uni.showToast({
      title: '请选择支付方式',
      icon: 'none'
    });
    return;
  }

  confirmLoading.value = true;
  createOrder().then(res => {
    uni.navigateTo({
      url: withQueryString('/pages/pay/alipayCode', {
        orderNo: res.orderNo,
        payOrderId: res.payOrderId,
        totalAmount: packageDetail.value.price,
        redirectUrl: '/pages/examination/planPaySuccess'
      })
    });
  }).finally(() => {
    confirmLoading.value = false;
  });
}

const selectPayType = ref();

// 定义支付方式数组
const payMethods = [
  {
    type: PAY_TYPE.BANK_CARD,
    title: '银联支付',
    image: 'bank-card.png',
    imageClass: 'h-129 w-129',
    tags: ['云闪付', '银行卡', 'NFC闪付']
  },
  {
    type: PAY_TYPE.ALIPAY,
    title: '支付宝支付',
    image: 'alipay.png',
    imageClass: 'h-118 w-118',
    tags: ['扫码支付', '人脸支付', '亲情码']
  },
  {
    type: PAY_TYPE.WECHAT,
    title: '微信支付',
    image: 'wechat.png',
    imageClass: 'h-106 w-106',
    tags: ['扫码支付', '人脸支付', '亲情码']
  }
];

function onSelectPayType(type: PAY_TYPE) {
  selectPayType.value = type;
}
</script>

<template>
  <view class="plan-pay flex-col">
    <AuthBar />
    <view class="flex-1 overflow-auto pb-40">
      <view class="page-title mt-55">
        缴纳体检费用
      </view>
      <view class="page-subtitle">
        请确认您的订单信息，选择支付方式
      </view>
      <view class="page-content px-48">
        <view class="pay-info mt-60">
          <view class="pay-info__title">
            订单信息
          </view>
          <view class="pay-info__group">
            <view class="pay-cell">
              <view class="pay-cell__title">
                体检套餐
              </view>
              <view class="pay-cell__value">
                {{ packageDetail?.packageName }}
              </view>
            </view>
            <view class="pay-cell">
              <view class="pay-cell__title">
                预约日期
              </view>
              <view class="pay-cell__value">
                {{ dayjs(Number(appointmentDate)).format('YYYY-MM-DD') }}
              </view>
            </view>
            <view class="pay-cell">
              <view class="pay-cell__title">
                预约时间
              </view>
              <view class="pay-cell__value">
                {{ timePeriod }}
              </view>
            </view>
            <view class="slider" />
            <view class="pay-cell pay-cell__total">
              <view class="pay-cell__title">
                应付金额
              </view>
              <view class="pay-cell__value">
                ¥{{ packageDetail.price }}
              </view>
            </view>
          </view>
        </view>

        <view class="pay-list">
          <view class="pay-list__title">
            选择支付方式
          </view>
          <view class="mt-24">
            <view
              v-for="method in payMethods"
              :key="method.type"
              class="pay-item"
              :class="{ 'pay-item--active': selectPayType === method.type }"
              @click="onSelectPayType(method.type)"
            >
              <view class="pay-item__cover">
                <image :src="buildAssetSource(method.image)" :class="method.imageClass" />
              </view>
              <view class="pay-item__content">
                <view class="pay-item__title">
                  {{ method.title }}
                </view>
                <view class="pay-item__tags">
                  <view v-for="(tag, index) in method.tags" :key="index" class="pay-item__tag">
                    {{ tag }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <view class="mt-50 flex-center">
          <view class="next-btn w-708">
            <wd-button block :loading="confirmLoading" @click="handleNext">
              确认支付 {{ packageDetail?.price }} 元
            </wd-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '体检预约',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.plan-pay {
  background-color: var(--bg-color);
  height: 100%;

  .page-title {
    font-size: 60px;
    font-weight: bold;
    color: var(--text-color);
    text-align: center;
  }

  .page-subtitle {
    text-align: center;
    font-size: 28px;
    color: var(--secondary-text-color);
    max-width: 524px;
    margin: 0 auto;
  }

  .pay-info {
    background: #e2ecfc;
    border-radius: 20px;
    padding: 23px 40px;

    .pay-info__title {
      font-size: 32px;
      font-weight: 500;
      color: var(--secondary-text-color);
    }

    .pay-info__group {
      margin-top: 20px;
      .pay-cell {
        @apply flex justify-between items-center;
        color: var(--text-color);
        margin-bottom: 20px;

        .pay-cell__title {
          font-size: 32px;
          font-weight: 500;
          font-weight: 400;
          font-size: 32px;
        }

        .pay-cell__value {
          font-size: 32px;
          font-weight: 500;
          font-weight: 500;
          font-size: 32px;
        }
        &.pay-cell__total {
          .pay-cell__title {
            font-size: 36px;
            font-weight: bold;
          }
          .pay-cell__value {
            font-size: 36px;
            font-weight: bold;
          }
        }
      }
      .slider {
        height: 1px;
        background: var(--primary);
        margin: 40px 0;
      }
    }
  }

  .pay-list {
    background: #cbdefc;
    border-radius: 20px;
    padding: 23px 40px;
    margin-top: 38px;

    .pay-list__title {
      font-size: 32px;
      font-weight: 500;
      color: var(--secondary-text-color);
    }

    .pay-item {
      @apply flex items-center;
      background: rgba(247, 250, 254, 0.5);
      border-radius: 20px;
      margin-bottom: 20px;
      padding: 30px 35px;

      .pay-item__cover {
        @apply flex-center;
        width: 129px;
        height: 129px;
      }

      .pay-item__content {
        flex: 1;
        margin-left: 26px;

        .pay-item__title {
          font-size: 36px;
          font-weight: bold;

          color: var(--text-color);
        }

        .pay-item__tags {
          @apply flex items-center;
          margin-top: 20px;
          .pay-item__tag {
            background: rgba(247, 250, 254, 0.5);
            border: 2px solid rgba(255, 255, 255, 0.5);
            border-radius: 100px;
            padding: 4px 20px;
            margin-right: 10px;
            font-size: 26px;
            color: var(--secondary-text-color);
          }
        }
      }

      &.pay-item--active {
        background: #fff;

        .pay-item__tags {
          .pay-item__tag {
            background: rgba(209, 229, 255, 0.5);
          }
        }
      }
    }
  }

  .next-btn {
    --wot-button-medium-height: 89px;
    --wot-button-medium-fs: 36px;
    --wot-button-medium-loading: 36px;
    :deep(.wd-button) {
      font-weight: bold;
    }
  }
}
</style>
